<template>
	<view class="shipinglianxian">
		<view class="top-btn">
			点击连线当前联络站
		</view>
		<cardbox style="width: 100%;" header="其他联络站列表">
			<view slot="main" class="content-card-main1">
				<view class="select-box">
					广州市<uni-icons type="down" size="16" color="#2A8BFD"></uni-icons>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
				<view class="main1-box">
					<view class="table-box" v-for="(item,index) in tableData" :key="index">
						<view class="table-title">
							<image src="/static/name_icon.png" class="img" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
						</view>
						<cTable :headerData="headerData" :tableData="item.list">
							<template v-slot:unitName="{data}">
								<view class="font unitName">
									{{data.unitName}}
								</view>
							</template>
							<template v-slot:controls="{data}">
								<view class="font controls" @click="lookView">
									{{data.controls}}
								</view>
							</template>
						</cTable>
					</view>
				</view>
			</view>
		</cardbox>

	</view>
</template>

<script>
	import cardbox from '@/components/card/cardbox.vue'
	import cTable from '@/components/cTable/cTable.vue'
	export default {
		components: {
			cardbox,
			cTable,
		},
		data() {
			return {
				headerData: [{
						align: 'left',
						name: '优秀联络站',
						value: 'unitName',
						solt: 'unitName'
					},
					{
						align: 'left',
						name: '操作',
						value: 'controls',
						solt: 'controls'
					},

				],
				tableData: [{
						title: '越秀区',
						list: [{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							}, {
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							}
						]
					},
					{
						title: '海珠区',
						list: [{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							},
							{
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							}, {
								unitName: '2024年12月人大代表接待日公告',
								controls: '连线通话'
							}
						]
					}
				],
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
			}
		},
		methods: {
			lookView() {
				uni.navigateTo({
					url: '/pages/lianluozhan/huodong-detail'
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.shipinglianxian {
		.top-btn {
			width: 220rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: linear-gradient(180deg, #1B74EF 0%, #5299F5 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 26rpx 0 44rpx 36rpx;
		}

		.content-card-main1 {
			position: relative;

			.select-box {
				position: absolute;
				top: -90rpx;
				right: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #2A8BFD;

			}

			.main1-box {
				padding: 0 30rpx 30rpx;

				.table-box {
					.table-title {
						display: flex;
						align-items: center;
						margin: 30rpx 0 20rpx 0;

						.img {
							width: 42rpx;
							height: 40rpx;

						}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #000000;
							line-height: 28rpx;
						}
					}

				}

				.controls {
					font-size: 22rpx;
					color: #2A8BFD;
				}
			}
		}


	}
</style>